<template>
  <borderContainer bg-color="#fffbea" bd-color="#f6ce89" class="group-guide">
    <view class="group-guide-top">
      已有<text>{{ joinGroupNum }}</text
      >人参与，快来加入吧
    </view>
    <borderContainer
      bg-color="#fff6c6"
      bd-color="#ffeea9"
      class="group-guide-content"
    >
      <view class="content-wrap">
        <swiper
          :interval="5000"
          :vertical="true"
          :circular="true"
          :current="current"
          autoplay
          class="swiper-wrap"
          :class="isSingleGroupClass"
          @change="handleSwiperChange"
        >
          <swiper-item
            :item-id="idx"
            v-for="(i, idx) in groupRollBlockSort"
            :key="idx"
            :skip-hidden-item-layout="true"
          >
            <!-- 
              @capture-catch:touchmove=" " -->
            <view v-for="item in i" :key="item.id" class="content-item">
              <image :lazy-load="true" :src="item.avatar" />
              <view class="content-user">
                <view>团长</view>
                <view>{{ item.username }}</view>
              </view>
              <view class="content-desc">
                还差<text>{{ formatLackNum(item) }}人</text
                >{{ formatFullGroupText(item) }}团
              </view>
              <finishButton
                class="content-button"
                :width="160"
                :background-bg="smallButtonBg"
                @click="handleImmediatelyJoinGroup(item)"
              >
                立即入团
              </finishButton>
            </view>
          </swiper-item>
        </swiper>
        <view class="fake-swiper">
          <view class="fake-swiper-item" v-for="i in currentGroups" :key="i.id">
            <view @tap="handleImmediatelyJoinGroup(i)"> </view>
          </view>
        </view>
      </view>
    </borderContainer>
    <cloudTitle class="group-guide-tips">
      立即入团
    </cloudTitle>
  </borderContainer>
</template>

<script>
import cloudTitle from "./cloud-container";
import finishButton from "@/components/finish-button/index";
import borderContainer from "@/components/border-box/index";
import { smallButtonBg } from "@/libs/image-url";
import { formatNumber } from "@/libs/util";
const NOT_CITY_IMG =
  "https://xthk.oss-cn-shenzhen.aliyuncs.com/teach/1607048688400_0.06287480043250882_%E7%BB%84%208567%402x.png";
/**数组分组 */
const DivideIntoGroups = (source, num) => {
  let result = [];
  for (let i = 0, len = source.length; i < len; i += num) {
    result.push(source.slice(i, i + num));
  }
  return result;
};
export default {
  components: {
    cloudTitle,
    finishButton,
    borderContainer
  },
  props: {
    group_roll: { type: Array, required: true },
    /**参与数量 */
    join_num: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      smallButtonBg,
      isDisable: false,
      current: 0 // 当前轮播的索引
    };
  },
  computed: {
    currentGroups() {
      return this.groupRollBlockSort[this.current];
    },
    /**数据分组 */
    groupRollBlockSort() {
      return DivideIntoGroups(this.group_roll, 2);
    },
    /**当前展示的团是否为单个团 */
    isSingleGroupClass() {
      return {
        "single-group": this.currentGroups?.length === 1
      };
    },
    /**参与人数格式化 */
    joinGroupNum() {
      return formatNumber(this.join_num);
    }
  },
  methods: {
    formatFullGroupText({ lack_success_num }) {
      return lack_success_num !== 0 ? "成" : "满";
    },
    formatLackNum({ lack_success_num, lack_full_num }) {
      const last_num = lack_success_num || lack_full_num;
      return (last_num + "").slice(0, 2);
    },
    handleSwiperChange({ target: { current } }) {
      this.current = current;
      console.log(this.currentGroups);
    },
    /**立即入团 */
    handleImmediatelyJoinGroup(data) {
      if (this.isDisable) return;
      this.isDisable = true;
      let timer = setTimeout(() => {
        this.isDisable = false;
        timer = null;
      }, 1000);
      this.$emit("join", data.id);
    }
  }
};
</script>

<style lang="scss">
@import "../scss/group-common.scss";
.group-guide {
  min-height: 348px;
  width: 100%;
  padding: 90px 34px 50px;
  text-align: center;
  position: relative;
  margin-bottom: 64px;
  &-top {
    margin-bottom: 32px;
    @include base-text(40px, 28px, #303133);
    text {
      @include base-text(40px, 28px, #ff4b10);
    }
  }
  &-tips {
    top: -90px;
  }
  &-content {
    min-height: 136px;
    .swiper-wrap {
      height: 206px;
      transition: height 0.5s;
      pointer-events: none;
    }
    .single-group {
      height: 80px;
    }
    .content-wrap {
      padding: 32px;
      width: 100%;
      display: block;
      transition: all 0.7s;
      .fake-swiper {
        position: absolute;
        top: 32px;
        left: 32px;
        width: calc(100% - 64px);
        height: 100%;
        &-item {
          height: 80px;
          display: flex;
          align-items: center;
          padding-bottom: 22px;
          box-sizing: content-box;
          margin-bottom: 26px;
          &:last-child {
            border-bottom: none;
            padding-bottom: 24px;
            margin-bottom: 0;
          }
          view {
            width: 160px;
            height: 60px;
            position: absolute;
            right: 0;
          }
        }
      }
    }
    .content-item {
      height: 80px;
      display: flex;
      align-items: center;
      padding-bottom: 22px;
      box-sizing: content-box;
      border-bottom: 2px dashed #a13d0f;
      margin-bottom: 24px;
      &:last-child {
        border-bottom: none;
        padding-bottom: 24px;
        margin-bottom: 0;
      }
      image {
        box-sizing: border-box;
        width: 80px;
        height: 80px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        margin-right: 12px;
      }
      .content-user {
        flex: 1;
        margin-right: 32px;
        font-size: 24px;
        view:first-child {
          @extend %base-team-leader;
          margin-bottom: 6px;
        }
        view:last-child {
          width: 96px;
          text-align: left;
          @extend %base-one-hide;
          @include base-text(34px, 24px, #303133, 400);
        }
      }
      .content-desc {
        text-align: right;
        margin-right: 32px;
        @include base-text(34px, 24px, #303133, 400);
        text {
          @include base-text(34px, 24px, #fe6f34, 400);
        }
      }
      .content-button {
        .finish-button {
          height: 60px;
          line-height: 60px;
          font-size: 28px;
        }
      }
    }
  }
}
</style>
